<template>
  <div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-6">宿舍水电管理系统</h1>
    <div class="grid gap-6 md:grid-cols-2">
      <a-card a-card class="h-full flex flex-col justify-center items-center">
        <template #title> 账户余额 </template>
        <p class="text-3xl font-bold text-green-600">
          ¥{{ accountBalance.toFixed(2) }}
        </p>
      </a-card>
      <a-card class="h-full flex flex-col justify-center items-center">
        <utility-details :utility-data="utilityData"
      /></a-card>
    </div>
    <payment-form />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Card } from "ant-design-vue";
import UtilityDetails from "../../components/utility-details.vue";
import PaymentForm from "../../components/payment-form.vue";

// 这里应该从后端 API 获取实际数据
const accountBalance = ref(150.5);
const utilityData = ref({
  water: { usage: 5.2, cost: 26.0 },
  electricity: { usage: 120, cost: 84.0 },
});
</script>

<style scoped>
.container {
  width: 100%;
  padding: 20px;
}
.grid {
  display: flex;
}
.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.h-full {
  height: 100%;
  width: 50%;
}
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.justify-center {
  justify-content: center;
}
.items-center {
  align-items: center;
}
</style>
